import { Image, TouchableOpacity } from "react-native";
import { Tooltip } from "@ant-design/react-native";
import { useDispatch, useSelector } from "react-redux";
import { setLanguage } from "../store/language/actions";
import { RootState } from "../store";
import { useTranslation } from "react-i18next";

interface HeaderWithLanguageSelectorProps {}

const HeaderWithLanguageSelector: React.FC<
  HeaderWithLanguageSelectorProps
> = () => {
  const dispatch = useDispatch();
  const { t } = useTranslation();
  const currentLanguage = useSelector(
    (state: RootState) => state.language.currentLanguage
  );

  // 处理语言切换
  const handleLanguageChange = (lang: string) => {
    dispatch(setLanguage(lang));
  };

  return (
    <Tooltip.Menu
      mode="light"
      actions={[
        {
          key: "zh",
          icon: (
            <Image
              source={require("@/assets/images/zhongwen.png")}
              className="w-[24px] h-[24px]"
            />
          ),
          text: t("header.languageSelector.chinese"),
        },
        {
          key: "en",
          icon: (
            <Image
              source={require("@/assets/images/fuhao-yingwen.png")}
              className="w-[24px] h-[24px]"
            />
          ),
          text: t("header.languageSelector.english"),
        },
        {
          key: "zh-TW",
          icon: (
            <Image
              source={require("@/assets/images/fantizhongwen.png")}
              className="w-[24px] h-[24px]"
            />
          ),
          text: t("header.languageSelector.traditional"),
        },
      ]}
      placement="bottom"
      onAction={(item) => {
        if (item.key) {
          handleLanguageChange(String(item.key));
        }
      }}
      trigger="onPress"
    >
      <TouchableOpacity>
        <Image
          source={require("@/assets/images/language.png")}
          className="w-[18px] h-[18px]"
        />
      </TouchableOpacity>
    </Tooltip.Menu>
  );
};

export default HeaderWithLanguageSelector;
